<!DOCTYPE html>
<html>
<head>
    <title>攻略系列</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategyCatalogs.css"/>
    <script src="/js/raty/lib/jquery.raty.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css"/>
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <link rel="stylesheet" href="/js/plugins/jquery-confirm/css/jquery-confirm.css">
    <script src="/js/plugins/jquery-confirm/js/jquery-confirm.js"></script>
    <script src="/js/common.js"></script>
    <script>
        $(function () {
            var user = JSON.parse(sessionStorage.getItem("user"));
            var type;
            var state = 0;
            var strategyId = getParams().strategyId;
            if(user){
                var userId = user.id;
            }
            //根据不同攻略存储不同的类型点评点赞数据
            if (strategyId == 1) {
                type = 4;
            } else if (strategyId == 2) {
                type = 6;
            } else if (strategyId == 3) {
                type = 7;
            } else if (strategyId == 4) {
                type = 8;
            } else if (strategyId == 5) {
                type = 9;
            } else if (strategyId == 6) {
                type = 10;
            } else if (strategyId == 7) {
                type = 11;
            }

            // 通过star插件获取星星颗数
            $('#stars').raty({
                score: function() {
                    return $(this).attr('data-score');
                }
            });


            //获取大攻略相关标签
            $.get("/strategies/"+strategyId+"/comment/labels",function (data) {
                //回显标签
                $(".tag").renderValues(data);
            })

            //获取大攻略的点评
            $.get("/strategies/"+strategyId+"/comment",function (data) {
                console.log(data);
                //回显点评
                $("#comment").renderValues(data,{
                    starHandler:function (ele,value) {
                        var num = 0;
                        while (num<value){
                            $(ele).append('<i class="fa fa-star"></i>');
                            num++;
                        }
                        while(num<5){
                            $(ele).append('<i class="fa fa-star-o"></i>');
                            num++;
                        }
                    },
                    userHandler:function (ele,value) {
                        ele.href="/userProfiles.html?id="+value;
                    },
                    commentHandler:function (ele,value) {
                        ele.href="strategyComment.html?id="+value;
                    },
                    praHandler: function (ele, value) {
                        $(ele).attr("data-ids", value);
                        //设置标识
                        $(ele).find("span").attr("data-pid", value);

                        /*    $.get("/praiseNumber", {"typeId": value, "type": 4}, function (data) {
                                $("span[data-pid=" + value + "]").html(data.number);
                            });*/
                        //判断用户是否登录,登录点赞过就回显评论点赞
                        if (user) {
                            $.get("/praise/" + user.id, {"typeId": value, "type": type}, function (data) {

                                if (data.state == 1) {
                                    $("[data-ids=" + value + "]").removeClass("fa-thumbs-o-up");
                                    $("[data-ids=" + value + "]").addClass("fa-thumbs-up");
                                }
                            });
                        }
                    }
                });
            })

            //---------------------------------------------------------------------------------------------

            //某条点评点赞
            $("#comment").on("click", "[name=pra]", function () {
                var id = $(this).data("ids");
                var praId;//点评点赞的状态
                //判断有没有登录
                if (user) {
                    //查询当前点击点评点赞的状态
                    $.get("/praise/" + user.id, {"typeId": id, "type": type}, function (data) {
                        praId = data.state;
                    });
                    //修改
                    $.post("/praise/" + user.id, {"typeId": id, "type": type}, function (data) {
                        if (data.success) {
                            if (praId == 1) {
                                praId = 0;
                                $("span[data-pid=" + id + "]").html(parseInt($("span[data-pid=" + id + "]").html()) - 1)
                                $("[data-ids=" + id + "]").removeClass("fa-thumbs-up");
                                $("[data-ids=" + id + "]").addClass("fa-thumbs-o-up");
                            } else {
                                praId = 1;
                                $("span[data-pid=" + id + "]").html(parseInt($("span[data-pid=" + id + "]").html()) + 1)
                                $("[data-ids=" + id + "]").removeClass("fa-thumbs-o-up");
                                $("[data-ids=" + id + "]").addClass("fa-thumbs-up");
                            }
                        }
                    })
                } else {
                    $(document).dialog({
                        type: "confirm",
                        style: "IOS",
                        titleShow: false,
                        content: "亲,请先登录",
                        buttons: [{
                            name: "去登陆",
                            href: false,
                            callback: function () {
                                //去登陆界面
                                window.location.href = "login.html";
                            }
                        }],
                        autoClose: 3000
                    })
                }


            })
            //判断用户是否登录,如果登录则可以点评,反之跳转回首页登录
            if(sessionStorage.getItem('user') == null){
                $("#commentBtn").confirm({
                    title: '温馨提示',
                    content: '亲,您需要登录才能评价哦',
                    buttons: {
                        跳转回首页: function () {
                            window.location.href="/index.html";
                        },
                        取消: function () {
                        },
                    }
                })
            }else{
                $("#commentBtn").click(function () {
                    window.location.href = "/addComment.html?strategyId=" + strategyId;
                });
            }

            $.get("/strategies/" + strategyId,function (data) {
                $("#title").html(data.title);
            });

            //判断是否用户是否存在
            if (user != null){

                $.get("/strategies/" + strategyId,function (data) {
                    $("#title").html(data.title);
                    $(".strategyNum").html(data.strategyNum);
                    //判断状态是否收藏，改变收藏状态以及小心心显示
                    if (data.collect == 1){
                        //取消收藏
                        $(".collect").click(function () {
                            $.ajax({
                                url:"/strategies/"+strategyId,
                                data:{collect: 0, userId: userId},
                                type:"PUT",
                                success: function (data) {
                                    console.log(data);
                                    $(document).dialog({
                                        type:"confirm",
                                        style:"IOS",
                                        titleShow:false,
                                        content:"取消收藏",
                                        buttons:[{
                                            name:"返回页面",
                                            callback:function () {
                                                window.location.href = "/strategyCatalogs.html?strategyId=" + strategyId;
                                            }
                                        }]
                                    })
                                }
                            });
                        })
                        //小心心变红
                        $(".collect").removeClass("fa-heart-o").addClass("fa-heart").css("color", "red");
                        //状态为未收藏时
                    } else if (data.collect == 0){
                        //收藏日报
                        $(".collect").click(function () {
                            $.ajax({
                                url:"/strategies/"+strategyId,
                                data:{collect: 1, userId: userId},
                                type:"PUT",
                                success: function (data) {
                                    console.log(data);
                                    $(document).dialog({
                                        type:"confirm",
                                        style:"IOS",
                                        titleShow:false,
                                        content:"收藏成功",
                                        buttons:[{
                                            name:"返回页面",
                                            callback:function () {
                                                window.location.href = "/strategyCatalogs.html?strategyId=" + strategyId;
                                            }
                                        }]
                                    })
                                }
                            });
                        })
                        //小心心变空
                        $(".collect").removeClass("fa-heart").addClass("fa-heart-o");
                    }
                });
            } else {
                $.get("/strategies/" + strategyId,function (data) {
                    $("#title").html(data.title);
                    console.log(data.strategyNum);
                    $(".strategyNum").html(data.strategyNum);
                    //判断状态是否收藏，改变收藏状态以及小心心显示
                    if (data.collect == 1){
                        //小心心变红
                        $(".collect").removeClass("fa-heart-o").addClass("fa-heart").css("color", "red");
                        //状态为未收藏时
                    } else if (data.collect == 0){
                        //小心心变空
                        $(".collect").removeClass("fa-heart").addClass("fa-heart-o");
                    }

                    //点击小心心
                    $(".collect").click(function () {
                        $(document).dialog({
                            type: 'confirm',
                            style:"IOS",
                            titleShow:false,
                            content: '亲,需要登录才能收藏',
                            onClickConfirmBtn: function () {
                                window.location.href = "/login.html";
                            }
                        });
                    })
                });
            }


            $.get("/strategies/" + strategyId + "/catalogs",function (data) {
                var num = 1;
                $("#pills-catalog .catalogs").renderValues({list:data},{
                    showTitle:function (ele,value) {
                        var content = (num++) + "/" + value;
                        if(num < 10){
                            content = 0 +content;
                        }
                        ele.innerHTML = content;
                    },
                    handle:function (ele,value) {
                        ele.href = "/strategyDetails.html?id=" + value;
                    }
                })
            });
            //大家都在看
            $.get("/strategies/"+ strategyId + "/travels",function (data) {
                $("#pills-catalog .hot").renderValues(data,{
                    hot:function (ele,value) {
                        ele.href = "/travelContent.html?id=" + value;
                    }
                })
            })


            //-------------------------------------------------------------------------------------------
            //大攻略点赞数
            $.get("/praiseNumber", {"typeId": strategyId, "type": 1}, function (data) {
                $("#praises span").html(data.number);
            });

            if (user) {
                $.get("/praise/"+ user.id,{"typeId": strategyId, "type": 1}, function (data) {
                    state = data.state;
                    if(data.state == 1){
                        $("#praises").removeClass("fa-thumbs-o-up");
                        $("#praises").addClass("fa-thumbs-up");
                    }
                });
            }

            //大攻略点赞按钮
            $("#praise").click(function () {
                if (user) {
                    $.post("/praise/"+ user.id,{"typeId": strategyId, "type": 1},function (data) {

                        if (data.success){
                            console.log(state);
                            if (!state){
                                state = 1;
                                $("#praises span").html(parseInt($("#praises span").html()) + 1);
                                $("#praises").removeClass("fa-thumbs-o-up");
                                $("#praises").addClass("fa-thumbs-up");

                           } else if (state == 1) {
                                state = 0;
                                $("#praises span").html(parseInt($("#praises span").html()) - 1);
                                $("#praises").removeClass("fa-thumbs-up");
                                $("#praises").addClass("fa-thumbs-o-up");
                            }
                        }
                    })
                }else{
                    $(document).dialog({
                        type: "confirm",
                        style: "IOS",
                        titleShow: false,
                        content: "亲,请先登录",
                        buttons: [{
                            name: "去登陆",
                            href:false,
                            callback: function () {
                                //去登陆界面
                                window.location.href="login.html";
                            }
                        }],
                        autoClose:3000
                    })
                }
            });

        })


    </script>
</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>

        <div class="col-10">
            <div class="input-group-sm search">
                <input class="form-control searchBtn" placeholder="搜索旅行攻略">
            </div>
        </div>
    </div>
</div>

<div class="container strategies">
    <h5 class="title" id="title"></h5>
    <small><span>0</span>人阅读过此攻略</small>
    <div class="focus">
        <i class="collect fa fa-heart"><span class="strategyNum"> </span> 收藏</i>
        <a href="#" id="praise" >
        <i class="fa fa-thumbs-o-up" id="praises"><span> 0</span> 点赞</i>
        </a>
        <button class="btn">想去</button>
        <button class="btn">去过</button>
    </div>
</div>
<ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab">
    <li class="nav-item ">
        <a class="nav-link active" id="pills-catalog-tab" data-toggle="pill" href="#pills-catalog">
            <span>攻略目录</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link " id="pills-comment-tab" data-toggle="pill" href="#pills-comment">
            <span>骡友点评</span>
        </a>
    </li>
</ul>
<div class="tab-content " id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-catalog">
        <div class="container hot">
            <h6>大家都在看</h6>
            <div render-loop="list">
                <a href="travelContent.html"  render-key="list.travel.id" render-fun="hot">
                    <button class="btn" render-html="list.travel.title">上下九</button>
                </a>
            </div>


        </div>
        <div class="catalogs">
            <div render-loop="list">
                <div class="container detail">
                    <h6 render-key="list.name" render-fun="showTitle"></h6>
                    <div render-loop="list.details">
                        <a href="strategyDetails.html" render-key="list.details.id" render-fun="handle">
                            <button class="btn" render-html="list.details.title"></button>
                        </a>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="tab-pane fade " id="pills-comment">
        <div class="container tag">
            <h6>骡友标签</h6>
            <div render-loop="list">
                <span render-html="list.labelContent"></span>
            </div>
        </div>
        <br/><br/>
        <div id="comment">
            <div render-loop="list">
                <div class="container row comment">
                    <div class="col-2 comment-head">
                        <a href="userProfiles.html" render-key="list.user.id" render-fun="userHandler">
                            <img class="rounded-circle"
                                 render-src="list.user.headImgUrl">
                        </a>
                    </div>
                    <div class="col comment-right">
                        <p class="authorName"><span render-html="list.user.nickName"></span></p>
                        <span class="comment-star" render-key="list.star" render-fun="starHandler"></span>
                        <span class="comment-date" render-html="list.releaseTime"></span>
                        <div class="comment-content">
                            <a  render-key="list.id" render-fun="commentHandler">
                                <p render-html="list.content"></p>
                            </a>
                        </div>

                        <ul class="comment-img" render-loop="list.imgList">
                            <li>
                                <img render-src="list.imgList.customImgUrl">
                            </li>
                        </ul>

                        <div class="d-flex icon">
                            <a render-key="list.id" render-fun="commentHandler">
                                <i class="fa  fa-commenting-o " style="margin-right: 10px"> 评论 </i>
                            </a>

                            <i class="fa fa-thumbs-o-up" name="pra" render-key="list.id" render-fun="praHandler">
                                <span render-html="list.number">0</span>赞
                            </i>

                            <script>


                            </script>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
</div>

<div class="operation">
    <button class="btn">加入旅行单</button>
    <button class="btn" id="commentBtn">点评</button>
</div>


</body>
</html>